import React from 'react'
import { MyButton } from './MyButton'
import styles from "../css/task.module.css";
import Config from "../Config";
import { Debt } from '../const/imgs'
import * as locations from '../const/locations';
import {locationTo} from '../utils/LocationUtil'
import { getInfo } from '../utils/StorageUtil';
export const TaskRemain = ({expired_days}) => {
  console.log(getInfo('ids'))
  return (
    <div className={styles['debt_item2']} style={{ color: Config.fontColor }} >
      <div className={styles['debt_item2_left']}
        style={{
          display:'flex',
          alignItems:'center'
        }}
      >
        <img 
        src={Debt.SYTS} alt=''
        style={{
          display:'block',
          width:'28px',
          marginRight:'8px'
        }}
         />
        <div style={{lineHeight:'20px'}}>
          <div> 剩余<span style={{fontSize:'24px'}}>{expired_days+'天'}</span>        
        </div>
          <div style={{ color: Config.fontColor1 }}>
            实时填写催记，拍照记录更准确
        </div>
        </div>
      </div>
      <div className={styles['debt_button']}>
        <MyButton
          style={selectedStyle}
          name={"填写催记"}
          onClick={() => {
            locationTo( locations.ADDCUIJI)
          }}
        />
      </div>
    </div>
  )
}
const selectedStyle = {
  color: "#fff",
  background: Config.BaseColor
}
